<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

#ul {
	list-style: none;
}

#ul li {
	float: left;
	width: 30%;
	height: 300px;
	margin: 5px;
}
</style>
</head>
<body>
	<div
		style="position: absolute; width: 100%; height: 70%; top: 0; left: 0;">
		<ul id="ul">

		</ul>
	</div>
	<div
		style="position: absolute; width: 500px; height: 500px; left: 20px; bottom: 20px;">
		<button id="open">视频聊天</button>
		<iframe id="myIfi" style="width: 100%; height: 100%;"></iframe>
	</div>
</body>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="js/stomp.js" type="text/javascript"></script>
<script type="text/javascript"
	src="lib/layer-v3.1.1/layer/mobile/layer.js" charset="utf-8"></script>
<script src="js/websocket.js" type="text/javascript"></script>
<script>
var id=localStorage.getItem("id");
if($.trim(id)==""){
	id=randomString(16);
	localStorage.setItem("id", id);
}

$("#open").click(function(){
	if(IsPC()){
		$("#myIfi").attr("src","collection.html?id="+id);
	}else{
		layer.open({
		    content: "请选择摄像头",
		    shadeClose:false,
		    btn: ['前置摄像头', '后置摄像头'],
		    yes: function(index){
		    	$("#myIfi").attr("src","collection.html?id="+id+"&facingMode=user");
		    	layer.close(index); 
		    },
	    	no: function(index){
	    		$("#myIfi").attr("src","collection.html?id="+id+"&facingMode=environment");
		    }
		});
	}
	
	websocket.send("/topic/chat",JSON.stringify({"command":"add","id":id}));
});

function init(w){
	w.subscribe("/topic/chat",function(msg){
		var data=JSON.parse(msg.body);
		console.log(data);
		switch(data.command){
		case "add":
			if(id!=data.id){
				websocket.send("/topic/chat",JSON.stringify({"command":"node","id":id}));
				var li="<li id='"+data.id+"'>";
				li+='<iframe style="width: 100%;height: 100%;" src="show.html?id='+data.id+'"></iframe>';
				li+='</li>';
				$("#ul").append(li);
			}
			if($("#"+data.id).length>0){
				$("#"+data.id).find("iframe").attr("src","show.html?id="+data.id);
			}
			break;
		case "node":
			if(id!=data.id){
				if($("#"+data.id).length==0){
					var li="<li id='"+data.id+"'>";
						li+='<iframe style="width: 100%;height: 100%;" src="show.html?id='+data.id+'"></iframe>';
						li+='</li>';
						$("#ul").append(li);
				}
			}
			break;
		case "unload":
			$("#"+data.id).remove();
			break;
		}
	});
}

window.onbeforeunload=function(){
	websocket.send("/topic/chat",JSON.stringify({"command":"unload","id":id}));
}

function randomString(len) {
　　len = len || 32;
　　var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; 
　　var maxPos = $chars.length;
　　var pwd = '';
　　for (var i = 0; i < len; i++) {
　　　　pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
　　}
　　return pwd;
}

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
</script>
</html>